<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-09-21 16:34:18
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-11-08 16:59:43
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <span class="name">私有云平台</span>
      <el-select
        v-model="cloudPlatform"
        placeholder="请选择云平台"
        style="width: 180px; margin-left: 10px; margin-right: 20px"
        @change="cloudPlatformChange"
      >
        <el-option
          v-for="item in cloudPlatformOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="name">云账户</span>
      <el-select
        v-model="cloudAccountName"
        placeholder="请选择云账户"
        size="medium"
        style="width: 180px; margin-left: 10px; margin-right: 20px"
        no-data-text="请先选择云平台"
        :loading="loadingCloudAccountName"
        @change="cloudAccountNameChange"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
      <el-button
        size="medium"
        style="margin-left: auto"
        type="primary"
        icon="el-icon-plus"
        @click="createClick"
      >新增功率信息</el-button>
    </MyHeader>
    <MyMain class="main">
      <el-table
        v-loading="loading"
        class="common-table"
        :data="list"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
      >
        <el-table-column
          prop="cloudPlatform"
          label="私有云平台"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudAccountName"
          label="云账号名称"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          prop="archType"
          label="资源类型"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="pmax"
          label="最大功率(W)"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="pidle"
          label="空闲功率(W)"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="avgCoreNum"
          label="平均核数(Core)"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="height: 22px; line-height: 22px; padding: 0 10px"
              @click="editClick(scope.row)"
            >编辑</el-button>
            <el-popover
              :ref="`popover-delete-${scope.$index}`"
              placement="top"
              width="300"
              style="margin-left: 10px"
            >
              <p>是否确认删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    scope._self.$refs[
                      `popover-delete-${scope.$index}`
                    ].doClose()
                  "
                >取消</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteClick(scope)"
                >确定</el-button>
              </div>
              <el-button
                slot="reference"
                type="danger"
                style="height: 22px; line-height: 22px; padding: 0 10px"
                size="mini"
                :loading="scope.row.deleteLoading"
              >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>

    <FormDialog
      v-if="showDialog"
      :show.sync="showDialog"
      :is-edit="dialogType === 2"
      :info="dialogInfo"
      @success="successCallback"
    />
  </MyContainer>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { debugMgmtDelete, debugMgmtList } from '@/api/debugMgmt'
import { getPrivateAccountList } from '@/api/cn-mgmt'
import { CLUSTER_PLATFORM } from '@/utils/constant'
import FormDialog from './components/FormDialog.vue'

export default {
  name: 'SystemMonitorDebugPower',
  components: {
    MyContainer,
    MyHeader,
    MyMain,
    FormDialog
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      cloudPlatformOptions: CLUSTER_PLATFORM, // 云商选项
      cloudAccountNameOptions: [],
      cloudPlatform: '',
      cloudAccountName: '',
      loadingCloudAccountName: false,
      showDialog: false,
      dialogType: 1, // 1-创建 2-编辑
      dialogInfo: {}
    }
  },
  created() {},
  methods: {
    /**
     * @description: 成功回调
     * @param {*} val
     * @return {*}
     */
    successCallback(val) {
      if (val.isEdit) {
        this.$message.success({
          message: '编辑成功',
          duration: 2000
        })
        this.getList()
      } else {
        this.$message.success({
          message: '上传成功',
          duration: 2000
        })
        this.queryClick()
      }
    },
    /**
     * @description: 编辑
     * @return {*}
     */
    editClick(row) {
      this.dialogType = 2
      this.dialogInfo = row
      this.showDialog = true
    },
    /**
     * @description: 新增
     * @return {*}
     */
    createClick() {
      this.dialogType = 1
      this.dialogInfo = null
      this.showDialog = true
    },
    /**
     * @description: 删除
     * @param {*} row
     * @param {*} index
     * @return {*}
     */
    deleteClick(scope) {
      scope._self.$refs[`popover-delete-${scope.$index}`].doClose() // 取消popover
      this.$set(this.list[scope.$index], 'deleteLoading', true)
      const row = scope.row
      debugMgmtDelete({
        id: row.id
      })
        .then((res) => {
          this.$message.success('删除成功')
          if (this.list.length === 1) {
            // 当前页只有一条数据时 删除完刷新上一页数据
            this.pageNum = Math.max(this.pageNum - 1, 1)
          }
          this.getList() // 请求数据
        })
        .finally(() => {
          this.list[scope.$index].deleteLoading = false
        })
    },
    /**
     * @description: 云账户选择
     * @param {*} val
     * @return {*}
     */
    cloudAccountNameChange(val) {
      this.queryClick()
    },
    /**
     * @description: 云平台选择
     * @param {*} val
     * @return {*}
     */
    cloudPlatformChange(val) {
      this.cloudAccountName = ''
      this.cloudAccountNameOptions = []
      if (val) {
        this.loadingCloudAccountName = true
        getPrivateAccountList({
          keyword: this.cloudPlatform,
          pageNum: 1,
          pageSize: 100
        })
          .then((res) => {
            if (res.data) {
              this.cloudAccountNameOptions = Array.isArray(res.data.data)
                ? res.data.data
                : []
            } else {
              this.cloudAccountNameOptions = []
            }
          })
          .finally(() => {
            this.loadingCloudAccountName = false
          })
      }
    },
    /**
     * @description: 重置
     * @return {*}
     */
    resetClick() {
      this.cloudPlatform = ''
      this.cloudAccountName = ''
      this.cloudAccountNameOptions = []
      this.pageNum = 1 // 第一页
      this.getList() // 请求数据
    },
    /**
     * @description: 获取算网列表
     * @return {*}
     */
    getList() {
      this.handleRequestAndResp(debugMgmtList, {
        cloudPlatform: this.cloudPlatform,
        cloudAccountName: this.cloudAccountName,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.container {
  .header {
    .name {
      .textStyle(14px , 400, #4a4a4a);
      line-height: 20px;
    }
  }
}
</style>
